<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <span>A股票市场交易价:{{ data.pricec }} 股数:{{ data.stockc }}</span>
    <button
            @click="data.stockc++"
            :disabled="data.stockc == 0 ? false : true"
    >
        买入
    </button>
    <button
            @click="data.stockc--"
            :disabled="data.stockc == 1 ? false : true"
    >
        卖出
    </button>
    <br/>
    <span>B股票市场交易价:{{ data.priced }} 股数:{{ data.stockd }}</span>

    <button
            @click="data.stockd++"
            :disabled="data.stockd == 0 ? false : true"
    >
        买入
    </button>

    <button
            @click="data.stockd--"
            :disabled="data.stockd == 1 ? false : true"
    >
        卖出
    </button>
    <br/>
    <span>C股票市场交易价:{{ data.pricee }} 股数:{{ data.stocke }}</span>

    <button
            @click="data.stocke++"
            :disabled="data.stocke == 0 ? false : true"
    >
        买入
    </button>

    <button
            @click="data.stocke--"
            :disabled="data.stocke == 1 ? false : true"
    >
        卖出
    </button>
    <br/>
    <span>D股票市场交易价:{{ data.pricef}} 股数:{{ data.stockf }}</span>

    <button
            @click="data.stockf++"
            :disabled="data.stockf == 0 ? false : true"
    >
        买入
    </button>

    <button
            @click="data.stockf--"
            :disabled="data.stockf == 1 ? false : true"
    >
        卖出
    </button>
    <br/>
    <button @click="submitData()">确定</button>

    <p>总金额:{{ data.total }}</p>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
	const vm = new Vue({
		el: "#app",
		data:{
            data: {
               batch: '',
                pricec: '',
                priced: '',
                pricee: '',
                pricef: '',
                stockc: '',
                stockd: '',
                stocke: '',
                stockf: '',
                total: '',
            }
		},
		mounted(){
			this.getData()
		},
		methods:{
			getData(){
				axios.get('http://localhost:8111/getStockInfo')
                  .then( (response) => {
                    this.data = response.data.result;
                  })
                  .catch( (error) => {
                    console.log(error);
                  });
			},
			submitData(){
			    this.data.batch++;
                axios({
                    method:'post',
                    url:'http://localhost:8111/updateStockOperate',
                    data:this.data,
                    header:{
                        'Content-Type':'application/json'
                    }
                })
                .then((response)=>{
                    console.log(response.data)
                    this.getData()
                })
                .catch((error)=>{
                    console.log(Error)
                })
                if(this.data.batch%5==0){
                    alert('五次一周期,可以按自己毕业设计要求做些事情，')
                    if(this.data.batch==10){
                        alert('我这里测试只模拟十次便会重新初始化数据,进行下一轮模拟')
                        axios({
                            method:'post',
                            url:'http://localhost:8111/resetStockOperate',
                            data:this.data
                        })
                        .then((response)=>{
                            console.log(response.data)
                            this.getData()
                        })
                        .catch((error)=>{
                            console.log(Error)
                        })
                    }
                }else{

                }
			},
		}
	});


</script>
</body>
</html>
